<template>
  <div>
    <div class="seed_top_banner">
      <div class="seed_back_arrow" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuo"></use>
        </svg>
      </div>
      <div class="seed_page_title"><span>公告管理</span></div>
      <div class="seed_page_tool"></div>
    </div>
    <div class="seed_notice_list"
         v-infinite-scroll="loadMoreNotice"
         infinite-scroll-disabled="false"
         infinite-scroll-distance="0"
         infinite-scroll-immediate-check="false">
      <div class="seed_notice_li"  v-for="(notice ,index) in list" v-bind:key="notice.nid">
        <p class="seed_notice_date">{{notice.create_time}}</p>
        <div class="seed_notice_box">
          <div class="seed_notice_box_top">
            <span class="seed_notice_tip"></span>
            <div class="seed_notice_title">
              <span class="seed_notice_title_1">{{notice.n_title}}</span>
            </div>
            <div class="seed_notice_del" @click="del(notice.nid, index)">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-lajixiang"></use>
              </svg>
            </div>
          </div>
          <div class="seed_notice_box_bottom">{{notice.n_content}}</div>
        </div>
      </div>
    </div>
    <loading-more :allLoaded="allLoaded" :show="list.length > 0"></loading-more>
    <empty-data :show="allLoaded && list.length <= 0" style="margin-top: 1rem"></empty-data>
    <back-nav></back-nav>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [],
      param: {
        page: 1,
        page_size: 10
      },
      allLoaded: false,
      loading: false
    }
  },
  created () {
    this.getNoticeList()
  },
  methods: {
    getNoticeList () {
      this.loading = true
      // 数据请求
      this.$request.NoticeList(this.param).then(data => {
        if (this.param.page_size > data.length) {
          this.allLoaded = true
        }
        this.list = [...this.list, ...data]
      }).finally(() => {
        this.loading = false
      })
    },
    back () {
      this.$router.push({name: 'Home'})
    },
    del (id, index) {
      this.$MessageBox.confirm('确定要删除吗?').then(action => {
        this.$request.noticeDel(id).then(data => {
          this.$toast('删除成功')
          this.list.splice(index, 1)
        })
      })
    },
    loadMoreNotice () {
      if (this.loading || this.allLoaded) { // 正在加载 或 已取得全部数据
        return
      }
      setTimeout(() => {
        ++this.param.page
        this.getNoticeList()
      }, 300)
    }
  }
}
</script>
